<template>
  <div class="page-tools">
    <template v-if="commentStore.similar.isShow">
      <div class="page">
        <span
          class="icon left-arrow"
          @click="changeCurrentSimilar('prev')"
          :class="{ disabled: similar.current <= 1 }"
        ></span>
        <span>
          <span>相似题</span>
          <span
            >{{ similar.current }}/{{
              commentStore.similar.selectedList.length
            }}</span
          >
        </span>
        <span
          class="icon right-arrow"
          :class="{
            disabled:
              similar.current >= commentStore.similar.selectedList.length
          }"
          @click="changeCurrentSimilar('next')"
        ></span>
      </div>
    </template>
    <div class="page" v-else>
      <span
        class="icon left-arrow"
        @click="prev"
        :class="{
          disabled:
            props.currentQuestionNum <= 1 ||
            getData.length === 0 ||
            props.currentQuestionNum > getData.length
        }"
      ></span>
      <span>
        <span>原题</span>
        <span
          >{{ commentStore.currentQuestion.questionIndex || 1 }}/{{
            commentStore.questionList.length
          }}</span
        >
      </span>
      <span
        class="icon right-arrow"
        :class="{
          disabled:
            props.currentQuestionNum >= getData.length || getData.length === 0
        }"
        @click="next"
      ></span>
    </div>
  </div>
</template>
<script setup>
import { useComment } from '@/stores/comment'
import { reactive, ref, computed, onMounted, onBeforeUnmount } from 'vue'
import $bus from '@/utils/tools/bus'
const commentStore = useComment()
const props = defineProps({
  currentQuestionNum: {
    default: 1,
    type: Number
  },
  scale: {
    default: 1,
    type: Number
  }
})
const emits = defineEmits([
  'change-current-question',
  'change-similar-question'
])
const currentSort = ref(1)
const similar = reactive({
  current: 1
})
const prev = () => {
  if (
    props.currentQuestionNum <= 1 ||
    getData.value.length === 0 ||
    props.currentQuestionNum > getData.value.length
  ) {
    return
  }
  emits('change-current-question', 'prev')
  commentStore.setSimilar({
    isShow: false,
    list: []
  })
}

const getData = computed(() => {
  return commentStore.questionList
})

const next = () => {
  if (
    props.currentQuestionNum >= getData.value.length ||
    getData.value.length === 0
  ) {
    return
  }
  commentStore.setSimilar({
    isShow: false,
    list: []
  })
  emits('change-current-question', 'next')
}

const changeCurrentSimilar = desc => {
  if (desc === 'prev' && similar.current > 1) {
    similar.current -= 1
    emits('change-similar-question', similar.current - 1)
  } else if (
    desc === 'next' &&
    similar.current < commentStore.similar.selectedList.length
  ) {
    similar.current += 1
    emits('change-similar-question', similar.current - 1)
  }
}

onMounted(() => {
  $bus.on('reset-similar', () => {
    similar.current = 1
  })
  $bus.on('sort-change', val => {
    currentSort.value = val
  })
  if (sessionStorage.getItem('question-sort'))
    currentSort.value = Number(sessionStorage.getItem('question-sort'))
})

onBeforeUnmount(() => {
  $bus.off('sort-change')
  $bus.off('reset-similar')
})
</script>
<style lang="less" scoped>
.page-tools {
  z-index: 99;
  .page {
    min-width: 247px;
    border-radius: 12px;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    * {
      color: #fff;
      font-size: 28px;
    }

    .icon {
      cursor: pointer;
      width: 48px;
      height: 48px;
    }

    .left-arrow {
      background: url('@/assets/images/comment/left-arrow.png') no-repeat
        center/cover;

      &:hover {
        opacity: 0.7;
      }

      &:active {
        opacity: 0.7;
      }

      &.disabled,
      &:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }
    }

    .right-arrow {
      background: url('@/assets/images/comment/right-arrow.png') no-repeat
        center/cover;
      &:hover {
        opacity: 0.7;
      }

      &:active {
        opacity: 0.7;
      }

      &.disabled,
      &:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }
    }
  }
}
</style>
